<template>
  <div class="map-fence">
    <el-container>
      <el-aside
        width="130px"
        class="overflow-hidden"
      >
        <el-menu
          v-if="navmenus.length"
          :default-active="'m'+activeMenu.id"
          class="map-fence-menu"
          unique-opened
          :collapse-transition="false"
          @select="handleSelect"
        >
          <aside-menu-item
            v-for="menu in navmenus"
            :key="menu.id"
            :item="menu"
          />
        </el-menu>
      </el-aside>
      <el-main class="scoller-main">
        <el-scrollbar
          v-if="activeMenu"
          style="height:100%;"
          wrap-style="overflow-x:hidden;"
        >
          <component
            :is="activeMenu.name"
            v-model="activeLink"
            @input="handleCheckLink"
          />
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Menus from './mock/menus'
import { findTreeNode } from '@/utils'
import ActivityLink from '@/components/SourceFence/components/ActivityLink'
import AsideMenuItem from './components/AsideMenuItem'
import BrandLink from '@/components/SourceFence/components/BrandLink'
import CategoryLink from '@/components/SourceFence/components/CategoryLink'
import GoodsLink from './components/GoodsLink'
import CouponLink from './components/CouponLink'
import CustomLink from './components/CustomLink'
import KeywordLink from './components/KeywordLink'
import PageLink from './components/PageLink'

export default {
  name: 'CodeMirror',
  components: {
    ActivityLink,
    AsideMenuItem,
    BrandLink,
    CategoryLink,
    GoodsLink,
    CouponLink,
    CustomLink,
    KeywordLink,
    PageLink
  },
  props: {
    title: {
      type: String,
      default: 'CodeMirror'
    },
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      navmenus: Menus,
      activeIndex: 1,
      activeLink: null
    }
  },
  computed: {
    weblink: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    activeMenu() {
      var node = findTreeNode(this.navmenus, this.activeIndex)
      return node || this.navmenus[0]
    }
  },
  watch: {
    activeLink(v) {
      this.$emit('input', v)
    }
  },
  created() {
    if (this.weblink) {
      this.activeLink = { ...this.weblink }
      if (this.weblink.fence_id) {
        this.activeIndex = this.weblink.fence_id
      }
    }
  },
  methods: {
    handleSelect(e) {
      var index = Number(e.replace(/[^0-9]/gi, ''))
      this.activeIndex = index
    },
    handleCheckLink(e) {
      var data = Object.assign({}, e, {
        fence_id: this.activeIndex
      })
      this.activeLink = data
    }
  }
}
</script>

<style lang="scss">
.map-fence {
  height: 100%;
  > .el-container {
    height: 100%;
  }
  &-menu {
    height: 100%;
  }
  .scoller-main {
    padding: 0;
    > .el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view {
      padding: 15px;
      min-height: 100%;
    }
  }
}
</style>
